
<template>
	<view class="design-tool">
		<!-- 顶部主题栏 -->
		<view class="header">
			<view class="header-left">
				<text class="logo">讯排设计</text>
				<view class="undo-redo">
					<button class="icon-button"><text class="icon-undo"></text></button>
					<button class="icon-button"><text class="icon-redo"></text></button>
				</view>
			</view>
			<view class="header-center">
				<input type="text" class="title-input" v-model="projectTitle" placeholder="万圣节房地产活动/营销创意公众号封面">
			</view>
			<view class="header-right">
				<button class="text-button">文件</button>
				<button class="text-button">帮助</button>
				<button class="primary-button">保存</button>
				<button class="primary-button">下载作品</button>
			</view>
		</view>

		<view class="main-content">
			<!-- 左侧边栏 -->
			<view class="sidebar-container">
				<view class="sidebar-nav">
					<ul>
						<li><text class="active"><text class="icon-template"></text>模板</text></li>
						<li><text><text class="icon-material"></text>素材</text></li>
						<li><text><text class="icon-text"></text>文字</text></li>
						<li><text><text class="icon-photo"></text>照片</text></li>
						<li><text><text class="icon-toolbox"></text>工具箱</text></li>
						<li><text><text class="icon-my"></text>我的</text></li>
					</ul>
				</view>
				<view class="sidebar-content">
					<view class="search-bar">
						<input type="text" placeholder="输入关键词搜索">
						<button class="search-button"><text class="icon-search"></text></button>
					</view>
					<text class="content-title">公众号封面</text>
					<view class="template-grid">
						<!-- 使用v-for循环渲染模板项 -->
						<view class="template-item" v-for="template in templates" :key="template.id">
							<image :src="template.image" :alt="template.name" mode="aspectFill"></image>
						</view>
					</view>
				</view>
				<button class="sidebar-toggle"><text class="icon-collapse"></text></button>
			</view>

			<!-- 中间画布区域 -->
			<view class="canvas-area">
				<view class="canvas">
					<!-- 画布内容 -->
					<text class="canvas-text">Halloween party</text>
					<text class="canvas-text">奇趣万圣</text>
					<text class="canvas-text">魅影来袭</text>
				</view>
			</view>

			<!-- 右侧属性面板 -->
			<view class="properties-panel">
				<text class="panel-title">设置</text>
				<view class="property">
					<label>画布尺寸</label>
					<view class="size-inputs">
						<input type="number" v-model="canvasWidth"> x
						<input type="number" v-model="canvasHeight"> px
					</view>
				</view>
				<!-- 其他属性设置 -->
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			templates: [
				{ id: 1, name: '万圣夜奇妙派对', image: '/static/images/halloween1.jpg' },
				{ id: 2, name: '奇趣万圣', image: '/static/images/halloween2.jpg' },
				{ id: 3, name: '速报重磅', image: '/static/images/news.jpg' },
				{ id: 4, name: '账单无忧', image: '/static/images/bill.jpg' },
				{ id: 5, name: '双十一优惠', image: '/static/images/double11.jpg' },
				{ id: 6, name: '新年狂欢', image: '/static/images/newyear.jpg' },
				// ... 更多模板
			],
			canvasWidth: 900,
			canvasHeight: 473,
			projectTitle: '万圣节房地产活动/营销创意公众号封面'
		}
	},
	// ... 其他方法和生命周期钩子
}
</script>

<style>
.design-tool {
	display: flex;
	flex-direction: column;
	height: 100vh;
}

.header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 10px 20px;
	background-color: #ffffff;
	border-bottom: 1px solid #e0e0e0;
}

.header-left,
.header-right {
	display: flex;
	align-items: center;
}

.logo {
	font-size: 18px;
	font-weight: bold;
	margin-right: 20px;
}

.undo-redo {
	display: flex;
	gap: 10px;
}

.header-center {
	flex-grow: 1;
	text-align: center;
}

.title-input {
	width: 80%;
	padding: 5px 10px;
	border: 1px solid #e0e0e0;
	border-radius: 4px;
	font-size: 14px;
}

.icon-button,
.text-button,
.primary-button {
	padding: 5px 10px;
	margin-left: 10px;
	border: none;
	background: none;
	cursor: pointer;
}

.primary-button {
	background-color: #1a73e8;
	color: white;
	border-radius: 4px;
}

.user-avatar img {
	width: 32px;
	height: 32px;
	border-radius: 50%;
}

/* 添加图标样式 */
.icon-undo::before {
	content: '↩';
}

.icon-redo::before {
	content: '↪';
}

.main-content {
	display: flex;
	height: calc(100vh - 60px);
	/* 假设顶部主题栏高度为60px */
}

.sidebar-container {
	display: flex;
	width: 400px;
	/* 调整总宽度 */
	border-right: 1px solid #e0e0e0;
}

.sidebar-nav {
	width: 60px;
	background-color: #f5f5f5;
}

.sidebar-nav ul {
	list-style-type: none;
	padding: 0;
	margin: 0;
}

.sidebar-nav li text {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 15px 0;
	font-size: 12px;
}

.sidebar-nav li text.active {
	background-color: #e6f3ff;
	color: #1a73e8;
}

.sidebar-content {
	flex: 1;
	overflow-y: auto;
	padding: 15px;
}

.search-bar {
	display: flex;
	margin-bottom: 15px;
}

.search-bar input {
	flex: 1;
	padding: 8px;
	border: 1px solid #e0e0e0;
	border-radius: 4px 0 0 4px;
}

.search-button {
	padding: 8px 12px;
	background-color: #f5f5f5;
	border: 1px solid #e0e0e0;
	border-left: none;
	border-radius: 0 4px 4px 0;
}

.template-grid {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

.template-item {
	width: 48%;
	margin-bottom: 10px;
}

.template-item image {
	width: 100%;
	height: 100px;
	/* 调整高度 */
	border-radius: 4px;
}

.sidebar-toggle {
	width: 20px;
	border: none;
	background-color: #f5f5f5;
	display: flex;
	align-items: center;
	justify-content: center;
}

.canvas-area {
	flex: 1;
	padding: 20px;
	background-color: #f0f0f0;
}

.properties-panel {
	width: 300px;
	padding: 20px;
	background-color: #ffffff;
	border-left: 1px solid #e0e0e0;
}

/* 添加图标样式（这里使用伪元素作为示例，实际应用中可能需要使用图标字体或SVG） */
.icon-template::before {
	content: '📁';
}

.icon-material::before {
	content: '🧩';
}

.icon-text::before {
	content: '🔤';
}

.icon-photo::before {
	content: '🖼️';
}

.icon-toolbox::before {
	content: '🧰';
}

.icon-my::before {
	content: '👤';
}

.icon-search::before {
	content: '🔍';
}

.icon-collapse::before {
	content: '◀';
}

/* ... 其他样式保持不变 */

.hide-button {
	position: absolute;
	right: -20rpx;
	top: 50%;
	transform: translateY(-50%);
	width: 20rpx;
	height: 60rpx;
	background-color: #F0F0F0;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}
</style>